<template>
  <div>
    <header>
      <a
        href="#"
        class="logo"
      ><img
          :src="logo"
          alt=""
        ></a>
      <a
        href="#"
        class="download"
      >下载酷狗</a>
      <a
        href="#"
        class="search"
      ><img
          :src="search"
          alt=""
        ></a>
    </header>
    <nav>
      <div
        :class="['nav_item',i===index?'active':'']"
        v-for="(item,i) in navs"
        :key="item.id"
      >{{item.title}}</div>
    </nav>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="item in carousels"
        :key="item.id"
      ><img
          :src="item.imgSrc"
          alt=""
        ></van-swipe-item>
    </van-swipe>
    <div class="songs">
      <div
        class="songs_item"
        v-for="item in musics"
        :key="item.id"
        @click="onMusicItemClick(item)"
      >
        <div class="song_name">{{item.name}}</div>
        <div class="icon_download">
          <van-icon name="down" />
        </div>
      </div>
    </div>
    <div
      class="audio_wrap"
      v-if="audio"
    >
      <audio
        :src="audio.musicSrc"
        autoplay
      ></audio>
      <div class="audio_tool">
        <div class="album"><img
            :src="audio.imgSrc"
            alt=""
          ></div>
        <div class="author">
          <div class="author_title">{{audio.name}}</div>
          <div class="author_name">{{audio.author}}</div>
        </div>
        <div class="audio_btns">
          <div class="btn_item">
            <van-icon name="pause-circle-o" />
          </div>
          <div class="btn_item">
            <van-icon name="arrow" />
          </div>
          <div class="btn_item">
            <van-icon name="down" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import carousels from "@/assets/data/json/carousel.json";
// import navs from "@/assets/data/json/nav.json";
// import musics from "@/assets/data/json/music.json";
import logo from "@/assets/data/images/logo.png";
import search from "@/assets/data/images/search.png";

import Vue from "vue";
import { Swipe, SwipeItem, Icon } from "vant";
import axios from "axios";
Vue.use(Icon);
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data() {
    return {
      logo,
      search,
      navs:[],
      index: 0,
      carousels:[],
      musics:[],
      audio: null,
    };
  },
  mounted(){
    axios.get("http://119.29.12.250:8080/json/carousel.json")
    .then(res=>{
      this.carousels=res.data;
    })
    axios.get("http://119.29.12.250:8080/json/music.json")
    .then(res=>{
      this.musics=res.data;
    })
  },
  methods: {
    onMusicItemClick(item) {
      console.log(item);
      this.audio = item;
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
}
a {
  text-decoration: none;
}
header {
  background-color: #2ca2f9;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    width: 40%;
    margin-left: 10px;
  }
  .download {
    width: 100px;
    height: 30px;
    border: 1px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px;
    border-radius: 6px;
    font-size: 14px;
  }
  .search {
    flex: 1;
    text-align: right;
    padding-right: 10px;
    img {
      width: 25%;
    }
  }
}
nav {
  display: flex;
  justify-content: space-around;
  .nav_item {
    display: flex;
    align-items: center;
    height: 50px;
  }
  .active {
    color: #2ca2f9;
    border-bottom: 5px solid currentColor;
  }
}
.songs {
  .songs_item {
    color: #666;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 20px;
    border-bottom: 1px dashed #ccc;
  }
}
.audio_tool {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #000;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  .album {
    img {
      width: 15vw;
      height: 15vw;
    }
  }

  .author {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 20px;
    .author_title {
      color:#fff;
      font-size: 16px;
      padding-bottom: 10px;
      overflow: hidden;
    }

    .author_name {
      color:#ccc;
      font-size: 14px;
    }
  }

  .audio_btns {
    color:#fff;
    display: flex;
    justify-content: space-around;
    padding-left: 10px;
    align-items: center;
    .btn_item {
      width: 40px;
      height: 40px;
      font-size: 40px;
    }
  }
}
</style>